<!doctype html>
<style>
@media only screen and (min-width:10px) and (max-width:10000px) and (not (width <= 10px))
{
	@media all and (orientation: landscape)
	{
		@media (aspect-ratio > 2/1) and ( not (aspect-ratio <= 2) )
		{
			@media (color) and (color=8) and (10>=color>1) and (7< color<=12) and (color:8) and (min-color:4) and (max-color:12)
			{
				#a {color: blue}
			}
		}
	}
}

@media /* empty media query list evaluates to true */
{
	#b {color: blue}
}

/* Chrome incorrectly considers (orientation = landscape) to be true. By the standard, range syntax cannot be used for discrete media features. 
   Firefox works as expected. */
@media (orientation = landscape)
{
	#c {color: red}
}

/* This test doesn't work in Chrome/Firefox - looks like they don't support infinite value for resolution yet. */
@media not (resolution = infinite)
{
	@media (not (infinite = resolution)) and (resolution < infinite) and (infinite >= resolution)
	{
		#d {color: blue}
	}
}

@media 	(width > 10px)                 /* 800px, see render_test.cpp */
	and	(height > 0)                   /* 1px,   see render_test.cpp */
	and	(device-width >= 0)            /* 0px (default), see media_features ctor in types.h (deprecated) */
	and	(device-height >= 0)           /* 0px (default), see media_features ctor in types.h (deprecated) */
	and	(orientation: landscape)       /* 1 < 800 */
	and	(aspect-ratio > 2)             /* 800/1 */
		/*(device-aspect-ratio)*/      /* always evaluates to false because device-height is 0, see media_feature::check in media_query.cpp (deprecated) */
	and	(color = 8)                    /* see test_container::get_media_features */
	and	(color-index = 0)              /* see test_container::get_media_features */
	and	(monochrome = 0)               /* see test_container::get_media_features */
	and	(resolution = 96dpi)           /* see test_container::get_media_features */
{
	#e {color: blue}
}

@media screen, garbage
{
	#f {color: blue}
}
@media screen and (garbage), (color) or garbage, 
	not layer, not only, not not, not and, not or  /* https://drafts.csswg.org/mediaqueries/#example-45dbfecd */
{
	#g {color: red}
}
@media (color) or (garbage)
{
	#h {color: blue}
}
@media not garbage  /* https://drafts.csswg.org/mediaqueries/#example-2b46833d */
{
	#i {color: blue}
}
@media not print and (color=0) /* `not` applies to the entire expression, not just media type */
{
	#j {color: blue}
}

</style>

<p id=a>a. blue
<p id=b>b. blue
<p id=c>c. black  (Chrome bad, Firefox good)
<p id=d>d. blue   (Chrome/Firefox bad)
<p id=e>e. blue
<p id=f>f. blue
<p id=g>g. black
<p id=h>h. blue
<p id=i>i. blue
<p id=j>j. blue
